<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单交互元素</title>
<style type="text/css">
body{
	padding:5px;
	font-size:12px
	}
	/*menu外围样式*/
menu{
	padding:0;/*与左边的距离*/
	margin:0;/*与上边的距离*/
	display:block;
	border:solid 1px #365167;
	width:222px
	}
	/*menu的每一行的样式*/
menu li{
	list-style-type:none;
	padding:5px;
	margin:5px;
	height:28px;
	width:200px	
	}
	/*选中时样式：高亮显示*/
menu li:hover{
	border:solid 1px #7da2ce;
	background-color:#cfe3fd;
	}
menu li img{
	clear:both;
	float:left;
	padding-right:8px;/*与左边的距离*/
	margin-top:-2px;
	width:30px;
	height:30px;
	}
	/*控制字的位置*/
menu li span{
	padding-top:5px;
	float:left;
	font-size:13px
	}
</style>
</head>

<body>
<menu>
<li>
<img src="img/1.jpg"/>
<span>Mozilla Firefox</span>
</li>
<li>
<img src="img/1.jpg"/>
<span>Mozilla Firefox</span>
</li>
<li>
<img src="img/1.jpg"/>
<span>Mozilla Firefox</span>
</li>
</menu>
</body>
</html>
